<template>
<div v-show="allocationType" class="app-container">
     <searchForm
       v-if="formOptions.length > 0"
       :formOptions="formOptions"
       @onSearch="onSearch"
       @onReset="onReset"
       :formLabelWidth="formLabelWidth"
       ref="searchFormRef"
       v-show="showSearch"
     />
     <div v-if="isScholarship" class="allot mb8">
        <div class="allot-title">
            分配汇总
        </div>
        <div class="allot-detail">
            <div class="allot-detail-item">
                本科已分配名额：{{allot.personNum}}人
            </div>
            <div class="allot-detail-item">
                专科已分配名额：{{allot.personNum2}}人
            </div>
            <div class="allot-detail-item">
                本科剩余名额：{{allot.remainPersonNum}}人
            </div>
            <div class="allot-detail-item">
                专科剩余名额：{{allot.remainPersonNum2}}人
            </div>
        </div>
     </div>
     <div v-if="isSubsidy" class="mb8 subsidy">
        <div class="subsidy-left">
            <div class="subsidy-left-title">
                申请计划：{{poorStudentPlan.planName || ''}}
            </div>
            <div class="subsidy-left-detail">
                <div class="subsidy-left-detail-item">
                    计划名额：{{poorStudentPlan.totalPerson || 0}}人
                </div>
                <div class="subsidy-left-detail-item" style="text-align: right;">
                    计划金额：{{poorStudentPlan.totalMoney || 0}}元
                </div>
            </div>
        </div>
        <div class="subsidy-right">
            <div class="subsidy-right-title">
                分配汇总
            </div>
            <div class="subsidy-right-detail">
                <div class="subsidy-right-detail-item">
                    总金额：{{poorStudentAllot.ypfMoney}}元
                </div>
                <div class="subsidy-right-detail-item" v-for="item in subsidyType" :key="'diffNamefp'+ item.typeId" :title="`${item.diffName}：${poorStudentAllot['diffName'+item.typeId+'yfp']}人`">
                    {{item.diffName}}：{{poorStudentAllot['diffName'+item.typeId+'yfp']}}人
                </div>
                <div class="subsidy-right-detail-item" v-for="item in subsidyType" :key="'diffNamesy'+ item.typeId" :title="`${item.diffName}剩余名额：${poorStudentAllot['diffName'+item.typeId+'sy']}人`">
                    {{item.diffName}}剩余名额：{{poorStudentAllot['diffName'+item.typeId+'sy']}}人
                </div>
            </div>
        </div>
     </div>
     <div v-if="isSchoolScholarship" class="mb8">
        <el-table :data="schoolScholarshiptableData"  show-summary>
            <el-table-column label="奖学金名称" prop="typeName" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="奖学金计划名额" prop="totalNum" :show-overflow-tooltip="true" align="center" />
            <el-table-column  label="奖学金已分配名额" align="center" v-if="!queryParams.studentType" key="allapplyNum">
                <el-table-column
                    prop="applyNum"
                    label="本科"
                    align="center"
                    >
                </el-table-column>
                <el-table-column
                    prop="applyNum2"
                    label="专科"
                    align="center"
                    >
                </el-table-column>
            </el-table-column>
            <el-table-column label="奖学金已分配名额"  v-if="queryParams.studentType == 'personNum'" prop="applyNum" key="applyNum" align="center" />
            <el-table-column label="奖学金已分配名额"  v-if="queryParams.studentType == 'personNum2'" prop="applyNum2" key="applyNum2" align="center" />
            <el-table-column label="奖学金剩余名额" prop="remainNum" key="allremainNum" align="center" :show-overflow-tooltip="true">
            </el-table-column>
        </el-table>
     </div>
     <el-row :gutter="10" class="mb8">
       <el-col 
        v-if="!isSubsidyteacher"
        :span="1.5">
         <el-button
           type="primary"
           plain
           size="mini"
           v-hasPermi="[allocationEditBtn]"
           @click="PlAllocation()"
         >批量分配</el-button>
       </el-col>
       <el-col 
        v-if="isSchoolScholarship"
        :span="1.5">
            <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                v-hasPermi="[ userExportBtn ]"
                @click="handleExport"
            >导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
     
     <el-table :data="tableData" v-loading="loading" id="schoolScholarshipTable"  show-summary>
         <template v-if="isSubsidy || isSubsidyteacher">
             <el-table-column label="学院" width="200" prop="collegeName" align="center" :show-overflow-tooltip="true"/>
             <el-table-column label="总名额" prop="totalPersonNum" :show-overflow-tooltip="true" align="center" />
             <el-table-column v-for="item in subsidyType" :key="'diffName'+ item.typeId" :label="item.diffName" align="center">
                <el-table-column
                    :prop="'diffName'+item.typeId+'personNum'"
                    label="本科"
                    >
                </el-table-column>
                <el-table-column
                    :prop="'diffName'+item.typeId+'personNum2'"
                    label="专科"
                    >
                </el-table-column>    
            </el-table-column>  
            <el-table-column label="总计金额（万元）" prop="totalCentNum" align="center" />
         </template>
         <template v-if="isScholarship">
             <el-table-column label="学院" width="200" prop="collegeName" :show-overflow-tooltip="true" align="center" />
             <el-table-column label="总名额" prop="totalPersonNum" :show-overflow-tooltip="true" align="center" />
             <el-table-column label="本科名额" prop="personNumber" :show-overflow-tooltip="true" align="center" />
             <el-table-column label="专科名额" prop="personNumber2" :show-overflow-tooltip="true" align="center" />
             <el-table-column label="总计金额" prop="totalCentNum" align="center" />
         </template>
         <template v-if="isSchoolScholarship">
             <el-table-column label="学院" width="200" prop="collageName" :show-overflow-tooltip="true" align="center" />
             <el-table-column label="总名额（人）" prop="totalPersonNum" min-width="120"  :show-overflow-tooltip="true" align="center" />
             <template v-if="!queryParams.studentType"> 
                <el-table-column v-for="item in schoolScholarshipType" :key="item.typeId" :label="item.typeName + '(人)'"  :min-width="item" align="center">
                    <el-table-column
                        :prop="'type'+item.typeId+'personNum'"
                        label="本科"
                        >
                    </el-table-column>
                    <el-table-column
                        :prop="'type'+item.typeId+'personNum2'"
                        label="专科"
                        >
                    </el-table-column>
                </el-table-column>
            </template> 
             <template v-if="queryParams.studentType == 'personNum'">
                <el-table-column v-for="item in schoolScholarshipType" :key="item.typeId" :label="item.typeName" :prop="'type'+item.typeId+'personNum'" align="center">
                </el-table-column>
             </template>
             <template v-if="queryParams.studentType == 'personNum2'">
                <el-table-column v-for="item in schoolScholarshipType" :key="item.typeId" :label="item.typeName" :prop="'type'+item.typeId+'personNum2'" align="center">
                </el-table-column>
             </template>
             <el-table-column label="总计金额（万元）" :fixed="schoolScholarshipTableFixed" min-width="120" prop="totalCentNum" align="center">
                <!-- <template slot-scope="scope">
               {{ scope.row.totalCentNum /10000 }}
             </template> -->
             </el-table-column>
         </template>
         <el-table-column label="操作" :fixed="schoolScholarshipTableFixed" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    v-hasPermi="[allocationEditBtn]"
                    @click="handleUpdate(scope.row)"
                >修改</el-button>
             </template>
         </el-table-column>
     </el-table>
     <UploadFile ref="uploadFileRef" :yearStr="queryParams.yearStr" @onSearch="onSearch" :studentType="queryParams.studentType"></UploadFile>
     <AllocationEdit :yearStr="queryParams.yearStr" ref="allocationEditRef" :subsidyType="subsidyType" :schoolScholarshipType="schoolScholarshipType" @onSearch="onSearch"></AllocationEdit>
</div>
</template>
 
 <script>
 import searchForm from "@/components/Search/searchForm.vue";
 import UploadFile from "@/views/poorStudent-scholarship/plan/modules/uploadFile.vue";
 import AllocationEdit from "./modules/allocationEdit.vue";

  import { 
    scholarshipAllocationList,
    scholarshipAllocationSummary,
    getCollegeListInfo,
    getScholarshipMoney,
    poorStudentAllocationList,
    poorStudentPlanRow,
    poorStudentAllocationTotal,
    collageId,
    getSchoolScholarshipAllocationList,
    getStatisSchScholarshipCollByYear
  } from "@/api/poorStudent-scholarship/allocation.js";
  import { 
    getYearStrList,
    getPoorStudentYearStrList,
    poorStudentList,
    getSchoolScholarshipYear
  } from "@/api/poorStudent-scholarship/plan.js";
  import { collegeSelect } from "@/api/information/studentInfor";
  import {mapState} from 'vuex'
  import exportExecl from "@/utils/exportExecl.js";
  import {
    scholarshipTypeArr
  } from "@/views/poorStudent-scholarship/dict.js"
export default {
     name:"allocationManagement",
     components: { 
        searchForm,
        UploadFile,
        AllocationEdit
     },
     data () {
         return{
             formLabelWidth: "80px",
             yearStr: '',
             formOptions: [
                {
                     label: "年份",
                     prop: "yearStr",
                     element: "el-select",
                     initValue: '',
                     options: [],
                     placeholder: "请选择年份"
                 },
                 {
                     label: "院系名称",
                     prop: "collegeId",
                     element: "el-select",
                     options: [],
                     placeholder: "请选择院系"
                 },
                 
             ],
             allot:{
                "personNum": 0,
                "personNum2": 0,
                "remainPersonNum": 0,
                "remainPersonNum2": 0
             },
             // 显示搜索条件
             showSearch: true,
             // 查询参数
             queryParams: {
                
             },
             // 总条数
             total: 0,
             tableData: [],
             // 遮罩层
             loading: false,
             subsidyType:[],
             scholarshipMoneyData:{},
             poorStudentPlan:{},
             poorStudentAllot:{},
             schoolScholarshiptableData:[],
             schoolScholarshipType:[],
             schoolScholarshipTableFixed: 'right',
             scholarshipTypeArr
         }
     },
     computed:{
        ...mapState({
            userInfo: state => state.user.userInfor
        }),
         allocationType () {
             return this.$route.params && this.$route.params.type
         },
         isSubsidy(){
            return this.allocationType === 'subsidy'
         },
         isSubsidyteacher(){
            return this.allocationType === 'subsidyteacher'
         },
         // 国家奖学金
        isScholarship(){
            return this.scholarshipTypeArr.some((item) => {
                return item.code == this.allocationType 
            })
        },
        scholarshipType() {
            const scholarshipTypeItem = this.scholarshipTypeArr.find((item) => {
                return item.code == this.allocationType 
            })
            if (scholarshipTypeItem) {
                return scholarshipTypeItem.typeId
            } else {
                return 0
            }
        },
        isSchoolScholarship(){
            return this.allocationType === 'schoolScholarship'
        },
        allocationEditBtn () {
            if (this.isSubsidy) {
                return 'poor:allocation:edit'
            }
            if (this.isScholarship) {
                return `${this.allocationType}:allocation:edit`
            }
            if (this.isSchoolScholarship) {
                return 'schoolScholarship:allocation:edit'
            }
            if (this.isSubsidyteacher) {
                return 'poor:allocation:teacheredit'
            }
        },
        userExportBtn(){
            if (this.allocationType === 'schoolScholarship') {
                return 'schoolScholarship:allocation:export'
            }
        },
     },
     created(){
        let yearAndCollege = []
        if (this.isSubsidy) {
            // [getPoorStudentYearStrList(), getCollegeListInfo()]
            yearAndCollege = [getPoorStudentYearStrList()]
        }
        if (this.isScholarship) {
            // [getYearStrList({scholarshipType: this.scholarshipType}), getCollegeListInfo()]
            yearAndCollege = [getYearStrList({scholarshipType: this.scholarshipType})]
        }
        if (this.isSchoolScholarship) {
            // [getSchoolScholarshipYear(), getCollegeListInfo()]
            yearAndCollege = [getSchoolScholarshipYear()]
            this.formOptions[2] = {
                label: "学生类型",
                prop: "studentType",
                element: "el-select",
                initValue: '',
                options: [{
                    value: '',
                    label: '全部',
                },{
                    value: 'personNum',
                    label: '本科',
                },{
                    value: 'personNum2',
                    label: "专科",
                }],
                placeholder: "请选择学生类型"
            }
        }
        if (this.isSubsidyteacher) {
            yearAndCollege = [getPoorStudentYearStrList()]
        }
      
       collegeSelect().then((res) => {
        if (this.formOptions && this.formOptions.length > 0) {
          this.formOptions[1].options = res.data.map((item) => {
            return {
              value: item["deptId"],
              label: item["deptName"],
            };
          });
        }
      });
 
        Promise.all(yearAndCollege).then((res) => {
            const years = res[0]
            // const xys = res[1] && res[1].data
            // console.log(res, years, '部门')
            this.formOptions[0].initValue = years[0]
            this.formOptions[0].options = years && years.map((item) => { 
                return {
                    label: item,
                    value: item
                }
            })

            if (this.isSubsidyteacher) {
                this.formOptions = [this.formOptions[0]]
            } else {
                this.formOptions = this.formOptions
            }
            
            this.yearStr = years[0]
            this.queryParams =  {
                yearStr: years[0],
                collegeId: ''
            }
            if (this.isSubsidyteacher) {
                this.queryParams.collegeId = this.userInfo.deptId
            }
            this.$refs.searchFormRef && this.$refs.searchFormRef.addInitValue()
            this.getAllocationData()
        })
        
        
     },
     methods:{
        /** 导出按钮操作 */
        handleExport() {
            this.schoolScholarshipTableFixed = false;
            let _studentType = '';
            let _hiddenIndex = 7;
            if (this.queryParams.studentType == 'personNum') {
                _studentType = '本科'
                _hiddenIndex = 5
            } else if (this.queryParams.studentType == 'personNum2') {
                _studentType = '专科'
                _hiddenIndex = 5
            }
            let REPORTID ='schoolScholarshipTable';
            let FILENAME =`校内奖学金名额分配表${_studentType ? '（'+_studentType+'）' : ''}.xlsx`;
            let HEADERRANGE = 'A3:M3'
            let l= this.tableData.length;
            let TABLERANGE =`A4:M${3 + l}`;
            let REDRANGE =`A${5 + l}:M${7 + l}`
            this.$nextTick(() => {
                exportExecl(REPORTID, FILENAME, HEADERRANGE, TABLERANGE,REDRANGE, _hiddenIndex,()=>{
                    this.schoolScholarshipTableFixed = 'right';
                })
            })
        },
        PlAllocation () {
            let _type = ''
            if (this.isSubsidy) {
                _type = 'subsidyAllocation'
            }
            if (this.isScholarship) {
                _type = 'scholarshipAllocation'
            }
            if (this.isSchoolScholarship) {
                _type = 'schoolScholarshipAllocation'
            }
            if (_type ==="subsidyAllocation" && !this.poorStudentPlan.planName) {
                this.$modal.msgError("未找到补助计划，请前往补助计划填写当前年份计划！");
                return
            }
            this.$refs.uploadFileRef.open(_type, {}, this.scholarshipType)
        },
         onSearch(val) {
             // 查询条件和分页数据合并
            this.queryParams = Object.assign(this.queryParams, val);
            this.getAllocationData();
         },
          // 重置
         onReset(data) {
            this.queryParams = Object.assign(this.queryParams, data);
            this.queryParams.yearStr = this.yearStr
            this.getAllocationData();
         },
         getList () {
             this.loading = true;
             if (this.isSubsidy || this.isSubsidyteacher) {
                poorStudentAllocationList(this.queryParams).then((res) => {
                    this.tableData = res.rows.map((item) => {
                        item.totalPersonNum =  0
                        item.totalCentNum =  0
                        if (item.diffCollPlanTypeReqList && item.diffCollPlanTypeReqList.length) {
                            item.diffCollPlanTypeReqList.forEach((diffItem) => {
                                item.totalPersonNum = item.totalPersonNum + diffItem.personNum + diffItem.personNum2
                                item.totalCentNum = item.totalCentNum + ((diffItem.personNum + diffItem.personNum2) * diffItem.diffMoney)
                                item['diffName'+ diffItem.diffTypeId + 'personNum'] = diffItem.personNum
                                item['diffName'+ diffItem.diffTypeId + 'personNum2'] = diffItem.personNum2
                            })
                
                        }
                        return item
                    })
                    console.log(this.tableData, 'this.tableData')
                    this.total = res.total
                    this.loading = false;
                })
            }
            if (this.isScholarship) {
                scholarshipAllocationList({
                    ...this.queryParams,
                    scholarshipType: this.scholarshipType
                }).then((res) => {
                    this.tableData = res.rows
                    this.total = res.total
                    this.loading = false;
                })
             }
             if (this.isSchoolScholarship) {
                this.schoolScholarshipType = []
                getSchoolScholarshipAllocationList({
                    orgFlag: 0,
                    yearStr: this.queryParams.yearStr,
                    collageId: this.queryParams.collegeId || '-1',
                    studentType: this.queryParams.studentType
                    
                }).then((res) => {
                    this.tableData = res.map((item, index) => {
                        let totalPersonNum = 0
                        let totalCentNum = 0
                        if (index === 0) {
                            this.schoolScholarshipType = item.scholarshipTypeList
                        }
                        item.scholarshipTypeList && item.scholarshipTypeList.forEach((typeItem) => {
                            item['type' + typeItem.typeId + 'personNum'] = typeItem.personNum || 0
                            item['type' + typeItem.typeId + 'personNum2'] = typeItem.personNum2 || 0
                            item['type' + typeItem.typeId + 'personNum3'] = typeItem.personNum3 || 0
                            if (this.queryParams.studentType == 'personNum') {
                                totalPersonNum = totalPersonNum + Number(typeItem.personNum || 0)
                                totalCentNum = totalCentNum + Number(typeItem.personNum || 0)*(typeItem.bonusMoney || 0)
                            } else if (this.queryParams.studentType == 'personNum2') {
                                totalPersonNum = totalPersonNum + Number(typeItem.personNum2 || 0)
                                totalCentNum = totalCentNum + Number(typeItem.personNum2 || 0)*(typeItem.bonusMoney || 0)
                            } else {
                                totalPersonNum = totalPersonNum + Number(typeItem.personNum || 0) + Number(typeItem.personNum2 || 0) + Number(typeItem.personNum3 || 0)
                                totalCentNum = totalCentNum + (Number(typeItem.personNum || 0) + Number(typeItem.personNum2 || 0) + Number(typeItem.personNum3 || 0))*(typeItem.bonusMoney || 0)
                            }  
                        })
                        if (this.queryParams.studentType == 'personNum') {
                            item.collageName =  item.collageName + '（本）'
                        } else if (this.queryParams.studentType == 'personNum2') {
                            item.collageName =  item.collageName + '（专）'
                        }
                        item.totalPersonNum = totalPersonNum
                        item.totalCentNum = totalCentNum/10000
                        return item
                    })
                    this.loading = false;
                })
             }
         },
         getAllocationSummary(){
            scholarshipAllocationSummary({
                ...this.queryParams,
                scholarshipType: this.scholarshipType
            }).then((res) => {
                this.allot = res
            })
         },
         getAllocationData() {
            if (this.isScholarship) {
                this.getAllocationSummary()
                // this.getScholarshipMoneyData()
            }
            // 贫困
            if (this.isSubsidy || this.isSubsidyteacher) {
                // 困难类型
                this.getPoorStudentList()
            }
            if (this.isSchoolScholarship) {
                this.getSchScholarshipStatis()
            }
            this.getList()
         },
         getSchScholarshipStatis(){
            getStatisSchScholarshipCollByYear({
                yearStr: this.queryParams.yearStr,
                collageId: this.queryParams.collegeId || ''
            }).then((res) => {
                // this.schoolScholarshiptableData = res.reduce((arr, item, index) => {
                //     if (index % 2 === 0) {
                //         let rowdata = { ...item }
                //         const nextRowdata = res[index + 1]
                //         if (nextRowdata) {
                //             for (const key in nextRowdata) {
                //                 rowdata[key + 'even'] = nextRowdata[key]
                //             }
                //         }
                //         arr.push(rowdata)
                //     }
                //     return arr
                // }, [])
                this.schoolScholarshiptableData = res
            })
         },
         getScholarshipMoneyData(){
            getScholarshipMoney({yearStr: this.queryParams.yearStr}).then((res) => {
                this.scholarshipMoneyData = res.data
            })
         },
         // 申请计划
         getPoorStudentList(){
            this.poorStudentPlan = {}
            this.subsidyType = []
            this.poorStudentAllot ={}
            poorStudentList({yearStr: this.queryParams.yearStr}).then((res) => {
                if (res.rows && res.rows.length>0 ) {
                    const _plan = res.rows[0] || {}
                    // let _planTotal = 0
                    // let _planMoneyTotal = 0
                    // _plan.diffTypePersonList.forEach((item) => {
                    //     _planTotal = _planTotal + Number(item.personNum)
                    //     _planMoneyTotal = _planMoneyTotal + Number(item.personNum) * Number(item.diffMoney)
                    // })
                    // _plan.userNum = _planTotal
                    // _plan.moneyNum = _planMoneyTotal
                    // this.poorStudentPlan = _plan
                    this.subsidyType = _plan.diffTypePersonList
                    this.getPoorStudentAllocationTotal()
                    poorStudentPlanRow({yearStr: this.queryParams.yearStr}).then((res)=>{
                        this.poorStudentPlan = res
                    })
                } else {
                    this.$modal.msgError("未找到补助计划，请前往补助计划填写当前年份计划！");
                }
            })
            
         },
        //  分配统计
        getPoorStudentAllocationTotal(){
            if (this.subsidyType && this.subsidyType.length > 0) {
                this.subsidyType.forEach((item) => {
                    this.poorStudentAllot['diffName'+item.typeId+'yfp'] = 0
                    this.poorStudentAllot['diffName'+item.typeId+'sy'] = 0
                })
                
                poorStudentAllocationTotal({yearStr: this.queryParams.yearStr}).then((res)=>{
                    let _poorStudentAllot = {}
                    res.forEach((item) => {
                        _poorStudentAllot['diffName'+item.typeId+'yfp'] = item.remainPersonNum ? item.remainPersonNum : 0
                        _poorStudentAllot['diffName'+item.typeId+'sy'] = item.totalPersonNum - (item.remainPersonNum ? item.remainPersonNum : 0)
                    })
                    _poorStudentAllot.ypfMoney = this.subsidyType.reduce((_num, item) => {
                        _num = _num  + Number(_poorStudentAllot['diffName'+item.typeId+'yfp']) * Number(item.diffMoney)
                        return _num
                    },0)
                    //  _poorStudentAllot.syMoney = this.subsidyType.reduce((_num, item) => {
                    //     _num = _num  + Number(_poorStudentAllot['diffName'+item.typeId+'sy']) * Number(item.diffMoney)
                    //     return _num
                    // },0)
                    this.poorStudentAllot = _poorStudentAllot 
                })
            }
        },
         /** 修改按钮操作 */
         handleUpdate(row) {
            if (this.isSubsidy && !this.poorStudentPlan.planName) {
                this.$modal.msgError("未找到补助计划，请前往补助计划填写当前年份计划！");
                return
            }
            if (this.isSchoolScholarship) {
                this.$refs.allocationEditRef.open(row, this.allocationType)
            } else {
                this.$refs.allocationEditRef.open(row, this.allocationType, this.isSubsidy ? this.poorStudentAllot :this.allot)
            }
         }
     }
 }
</script>
 
<style scoped lang="scss">
.allot{
    height: 70px;
    overflow: hidden;
    background-color: #f8f8f9;
    padding: 5px 0;
    &-title{
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    &-detail{
        padding: 0 30px;
        display: flex;
        align-items: center;
        &-item{
            width: 25%;
        }
    }
}
.subsidy{
    display: flex;
    &-left{
        width: 30%;
        background-color: #f8f8f9;
        height: 70px;
        padding: 5px 0;
        margin-right: 10px;
        &-title{
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        &-detail{
            padding: 0 30px;
            display: flex;
            align-items: center;
            &-item{
                width: 50%;
            }
        }
    }
    &-right{
        flex: 1;
        background-color: #f8f8f9;
        height: 70px;
        padding: 5px 0;
        &-title{
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        &-detail{
            padding: 0 30px;
            display: flex;
            align-items: center;
            &-item{
                width: 20%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>